<template>
	<view>
		<navbar :iSimmersive="false" title-color="#ffffff" background="#1b43c4" :placeholder="true" title="我的设备"></navbar>
		<view v-if="!loadding" class="all-main">
			<view v-if="data !== undefined && data!== null && data.length>0" class="main">
				<view v-for="(item,index) in data" :key="index" class="item">
					<view class="left">
						<image v-if="item.product.images" :src="item.product.images" style="width: 100rpx; height: 100rpx;"></image>
					</view>
					<view class="right">
						<view class="names">
							{{item.product.title}}
						</view>
						<view class="sn">
							{{item.sn}}
						</view>
					</view>
				</view>
			</view>
			<view>
				<!-- 输入框示例 -->
				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" mode="input" title="输入设备SN号" :value="sn"
						placeholder="请输入设备SN号" @confirm="dialogInputConfirm"></uni-popup-dialog>
						<!-- #ifdef APP -->
						<uni-icons type="scan" size="30" @click="bindsApp" style="position: absolute; top: 100rpx; right: 44rpx; z-index: 9999;"></uni-icons>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<uni-icons type="scan" size="30" @click="bindsH5" style="position: absolute; top: 100rpx; right: 44rpx; z-index: 9999;"></uni-icons>
						<!-- #endif -->
				</uni-popup>
			</view>
			<view class="btn">
				<!-- #ifdef APP -->
				<!-- <view class="button" @click="bindsApp">绑定设备</view> -->
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<!-- <view class="button" @click="bindsH5">绑定设备</view> -->
				<!-- #endif -->
				<view class="button" @click="bindsSN">绑定设备</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/config";
	/*#ifdef H5*/
	import wx from 'weixin-js-sdk';
	/*#endif*/
	export default {
	    data() {
	        return {
				loadding: false,
				keyword: '',
				data: [],
				users: {},
				sn: ''
	        };
	    },
		onLoad() {
			this.users = this.$storage.getJson("users");
			this.loadData()
			
			/*#ifdef H5*/
			this.injectConfig()
			/*#endif*/
		},
	    onShow() {
			this.users = this.$storage.getJson("users");
	    },
	    methods: {
			loadData() {
				this.$http.getMyShebei().then(res=>{
				    this.data = res.data.forEach((key, val) => {
						if (key.product.images!='') {
							key.product.images = config.system_url + key.product.images
						}
					})
					this.data = res.data
				})
			},
			bindsSN() {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(e) {
				this.sn = e
				if (this.sn == '') {
					this.$utils.msg("请输入设备SN号！");
					return false
				}
				this.bindSN()
			},
			// 微信公众号配置
			injectConfig() {
				let param = {
					url: window.location.href
				};
				this.$http.getShareConfig(param).then(res=>{
					wx.config({
						debug: false, // 开启调试模式,
						appId: res.data.appId, // 必填，企业号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: res.data.jsApiList, // 必填，需要使用的JS接口列表
					});
					wx.ready(() => {})
					wx.error(function(err) {});
				})
			},
			// APP扫码 - 绑定礼品
			bindsApp() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						_this.sn = res.result
						// _this.bindSN()
					}
				});
			},
			// 调用微信扫码 - 绑定礼品
			bindsH5() {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (res.errMsg == 'scanQRCode:ok') {
							_this.sn = resultrow[1]
							// _this.bindSN()
						} else {
							_this.$utils.msg("请识别有效的条形码！");
						}
					},
					fail: function(res) {},
				});
			},
			bindSN(){
				let params = {
					user_id: this.users.id,
					sn: this.sn
				};
				this.$http.posBind(params).then((res)=>{
					this.$utils.msg(res.info);
					if(res.status && res.status == 1){
						this.loadData()
					}
				});
			}
	    }
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}
	
	.search {
		padding: 20rpx;
	}
	
	.main {
		padding: 20rpx;
	
		.item {
			border-radius: 14rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: flex-start;
			padding: 20rpx;
			margin-bottom: 20rpx;
	
			.left {
				align-items: center;
			}
	
			.right {
				margin-left: 20rpx;
				.sn {
					padding-top: 24rpx;
					font-size: 28rpx;
				}
					
				.names {
					font-weight: bold;
					font-size: 32rpx;
					color: #909399;
				}
			}
		}
	}
	.btn{
		margin: 25rpx 0;
		width: 100%;
		.button {
			margin: 0 20rpx;
			display: block;
			line-height: 100rpx;
			text-align: center;
			background-color: #1b43c4;
			border: 1px solid #1b43c4;
			border-radius: 20rpx;
			color: #fff;
			font-size: 33rpx;
		}
	}
</style>